<template>
  <div class="h-screen overflow-auto sign-bg-img">
    <div class="flex justify-center items-center mt-26">
      <div class="login-warpper">
        <div class="code-box">
          <div class="h-9/12">
            <div class="text-lg font-black">打开乐乎App</div>
            <div class="text-base leading-10 mb-7">
              在「我的页」右上角打开扫一扫
            </div>
            <div class="box-code"></div>
            <div class="text-lg font-black mt-8">其它扫码方式：微信</div>
          </div>
          <div class="other-way-box mt-10 mb-8">
            <el-button size="small">下载知乎App</el-button>
            <el-button size="small">开通机构号</el-button>
            <el-button size="small">无障碍模式</el-button>
          </div>
        </div>
        <div class="login-box">
          <div class="loginContainer-content">
            <div class="text-lg font-extrabold form-title">密码登录</div>
            <div class="username-input__wrapper">
              <input
                v-model="loginForm.username"
                type="text"
                placeholder="请输入手机号或者邮箱"
              />
            </div>
            <div class="password-input__wrapper">
              <input
                v-model="loginForm.password"
                type="password"
                placeholder="密码"
              />
            </div>
            <div class="mt-4 text-sm forget-password__box">
              <span>忘记密码</span>
            </div>
            <el-button
              class="w-full mt-13"
              type="primary"
              @click="loginButtonClick"
              >点击登录</el-button
            >
          </div>
          <div class="otherLogin__header text-sm">
            <span>其它登录方式</span>
          </div>
          <div class="otherLogin__body">
            <div class="svg-wrapper">
              <div class="svg-item">
                <wechat-svg />
              </div>
              <div class="svg-item">
                <qq-svg />
              </div>
              <div class="svg-item">
                <sina-svg />
              </div>
            </div>
          </div>
          <div class="color-desc text-sm p-x-6">
            未注册手机验证后自动登录，注册即代表同意《乐乎协议》《隐私保护指引》
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import sinaSvg from "~/components/SvgComponents/sina-svg.vue";
import qqSvg from "~/components/SvgComponents/qq-svg.vue";
import wechatSvg from "~/components/SvgComponents/wechat-svg.vue";

const loginForm = ref({ username: "", password: "" });

/**
 * @description 登录按钮点击事件
 */
function loginButtonClick() {
  navigateTo({ path: "/" });
}
</script>

<style lang="scss" scoped>
.sign-bg-img {
  background-color: #b8e5f8;
  background-image: url("~/assets/images/sign_bg.png");
  background-repeat: no-repeat;
}

.logo-wrap {
  img {
    width: 120px;
  }
}

.login-warpper {
  width: 733px;
  height: 507px;
  display: flex;
  background-color: #fff;
  border-radius: 5px;

  .code-box {
    width: 332px;
    height: 100%;
    border-right: 1px solid #ebeced;
    flex-shrink: 0;
    padding-top: 100px;
    text-align: center;

    .box-code {
      width: 150px;
      height: 150px;
      border: 1px solid #ebebeb;
      margin-left: auto;
      margin-right: auto;
      border-radius: 5px;
    }
  }

  .login-box {
    flex-grow: 1;

    .loginContainer-content {
      padding: 0px 24px 30px 24px;

      .form-title {
        height: 49px;
        margin-top: 20px;
        line-height: 49px;
      }

      .password-input__wrapper {
        margin-top: 11px;
      }

      .username-input__wrapper {
        margin-top: 25px;
      }

      input {
        height: 44px;
        width: 100%;
        border: 0px;
        outline: none;
        border-bottom: 1px solid #ebeced;
        font-size: 14px;
        font-weight: 100;
      }

      .forget-password__box span:hover {
        cursor: pointer;
        color: #a5a5a5;
      }
    }

    .otherLogin__header {
      text-align: center;
      position: relative;
      color: #9196a1;
    }

    .otherLogin__header::before,
    .otherLogin__header::after {
      display: block;
      position: absolute;
      top: 50%;
      content: " ";
      width: 130px;
      height: 2px;
      background-color: #ebeced;
    }

    .otherLogin__header::before {
      left: 20px;
    }

    .otherLogin__header::after {
      right: 20px !important;
    }

    .otherLogin__body {
      padding: 20px;
      display: flex;
      justify-content: center;

      .svg-wrapper {
        width: 200px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .svg-item {
          background-color: #f8f8fa;
          padding: 5px;
          border-radius: 50%;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
